import {Box, Text, Image, Flex, HStack, Icon} from "@chakra-ui/react";
import styled from "styled-components";
import {ChevronRightIcon} from "@chakra-ui/icons";

const RankItem = styled(Box)`
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
`

const RankList = styled(Box)`
  display: flex;
  gap: 16px;
  justify-content: center;
  
`
const ImageRea = styled(Image)`
  position: relative;
  filter: grayscale(40%) ;
  opacity: 0.9;
  
`
const ImageAbs = styled(Image)`
  position: absolute;
  z-index: 3;
  object-fit:contain;

`
const RankBoard = () =>{
    const ranks = [
        {
            title: '秋风经过',
            artist: '任夏',
            rank: 1,
            category: '热歌榜'
        },
        {
            title: '许卿安',
            artist: '周深',
            rank: 1,
            category: '新歌榜'
        },
        {
            title: '秋风经过',
            artist: '任夏',
            rank: 2,
            category: '热歌榜'
        },
        {
            title: '许卿安',
            artist: '周深',
            rank: 2,
            category: '新歌榜'
        },
        {
            title: '秋风经过',
            artist: '任夏',
            rank: 3,
            category: '热歌榜'
        },
        {
            title: '许卿安',
            artist: '周深',
            rank: 3,
            category: '新歌榜'
        },
        {
            title: '秋风经过',
            artist: '任夏',
            rank: 4,
            category: '热歌榜'
        },
        {
            title: '许卿安',
            artist: '周深',
            rank: 4,
            category: '新歌榜'
        },
        {
            title: '秋风经过',
            artist: '任夏',
            rank: 5,
            category: '热歌榜'
        },
        {
            title: '许卿安',
            artist: '周深',
            rank: 5,
            category: '新歌榜'
        },
    ];
    const rankingImages  = [
        'https://h5s.kuwo.cn/www/kw-www/img/icon_first.7afe2f1.png',
        'https://h5s.kuwo.cn/www/kw-www/img/icon_secondary.3095603.png',
        'https://h5s.kuwo.cn/www/kw-www/img/icon_third.4569f0e.png'

    ]
    const categories = [
        { name: '热歌榜', imageUrl: 'https://h5static.kuwo.cn/upload/image/d8faf807ce667092ef29f8d62237bfbf3a1f127a6370664705722a67c8f9e23b.png',imgBg:"https://img3.kuwo.cn/star/albumcover/500/s4s26/45/3663293931.jpg" },
        { name: '飙升榜', imageUrl: 'https://h5static.kuwo.cn/upload/image/fcd292e95c97704678ae6a77191df0b915dd9b9657296ca20b9f19047f672055.png' ,imgBg: "https://img1.kuwo.cn/star/albumcover/500/s4s47/68/598908941.jpg"},
        { name: '新歌榜', imageUrl: 'https://h5static.kuwo.cn/upload/image/fb29b783091117318dbb5dac53f8a7deee25b34054f7d00fb91640f6106773c6.png' ,imgBg:"https://img3.kuwo.cn/star/albumcover/500/s4s20/98/2474920312.jpg"},
        { name: '欧美榜', imageUrl: 'https://h5static.kuwo.cn/upload/image/8eef6e95406eb46f8ed544384bb457e20c8d66a33c3077c586e58537b620ecf5.png' ,imgBg:"https://img2.kuwo.cn/star/albumcover/500/s3s82/88/1951505073.jpg"},
        { name: '日韩榜', imageUrl: 'https://h5static.kuwo.cn/upload/image/838f7519b40479695a6f5a22923704600d2dfceb4e8d6ad0099b5a169ae0df03.png' ,imgBg: "https://img4.kuwo.cn/star/albumcover/500/42/81/546622733.jpg"}
    ];
    return (
        <Box mt={10}>
            <HStack>
                <Text fontSize="xx-large" fontWeight="bold" color="gray.700" >排行榜</Text>
                <Text textAlign="end" mt="10px"  ml="20px" fontSize="sm" fontWeight="thin" color="gray.500" >更多
                    <Icon  as={ChevronRightIcon} />
                </Text>
            </HStack>
            

            <Box mt={6}  display="flex" gap="4" border="none"  >
                {categories.map((category,index)=>(
                    <RankItem key={index}    w="230px"  mb="4" flex="1" >
                        <ImageRea    src={category.imgBg}  alt={category.name} w="100%"   h="128px" mb="2"      />
                        <ImageAbs    src={category.imageUrl}  alt={category.name}  w="120px"   h="128px"     />
                        {ranks.filter(rank=>rank.category===category.name).map((rank,index)=>(
                            <Flex  w="100%"  mb="4"  justifyContent="space-between" p="2px" >
                                {index<=2 ? (
                                    <Image  flex="1" objectFit="contain"   src={rankingImages[index]}  w="10" h="10" />)
                                    :<Text textAlign="center"  flex="1"  fontSize="xl" fontWeight="bold" >{index+1}</Text>
                            }

                                <Flex   flex="3"  direction="column" alignItems="center">
                                    <Text as="a" href="#" _hover={{fontWeight:"bold"}}>{rank.title} </Text>
                                    <Text as="a" href="#" _hover={{fontWeight:"normal"}}   fontWeight="thin">{rank.artist}</Text>
                                </Flex>
                            </Flex>
                        ))}
                    </RankItem>
                ))}
            </Box>   
        </Box>
    )
}
export  default  RankBoard